<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户中心</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主页面 -->
    <div class="mainBox">
      <el-card class="cardBox">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
          <el-button style="float: right; padding: 3px 0" type="text">修改</el-button>
        </div>
        <el-descriptions class="baseDescriptions" :column="3" title="基本信息" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ userData.userInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ userData.userInfo.mobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-printer"></i>
              邮箱
            </template>
            {{ userData.userInfo.email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              个人备注
            </template>
            无
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              创建时间
            </template>
            {{ userData.userInfo.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="baseDescriptions" :column="3" title="角色信息" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              角色名称
            </template>
            <el-tag type="warning" effect="Dark">
              {{ userData.userRole.name }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              角色代码
            </template>
            {{ userData.userRole.designation }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-printer"></i>
              角色备注
            </template>
            无
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              角色介绍
            </template>
            {{ userData.userRole.description }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              创建时间
            </template>
            {{ userData.userRole.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="baseDescriptions" :column="3" title="小组信息" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              小组名称
            </template>
            <el-tag effect="Dark">
              {{ userData.userGroup.name }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              小组介绍
            </template>
            {{ userData.userGroup.description }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              创建时间
            </template>
            {{ userData.userGroup.createTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '../../utils/util.js';
export default {
  name: "UserCenter",
  data() {
    return {
      userData: getUserInfo()
    };
  },
  components: {
  },
  methods: {
  },
  created() {
    console.log(this.userData);
  },
};
</script>
<style scoped>
.mainBox {
  margin-top: 30px;
  width: 95%;
  height: 100%;
  margin-left: 1%;
}

.cardBox {}

.baseDescriptions {
  width: 70%;
  margin-bottom: 30px;
}
</style>
